* {
	margin: 0;
	border: 0;
}

ul, li{
	list-style-type: none;
}

body {
	font-family:"Microsoft YaHei";
	max-height: 100%;
	background-color: #EBEBEB;
	overflow:hidden;
}

.top {
	width: 100%;
	height: 8%;
	z-index: 1000;
	background-color: #444444;
	text-align: center;
	color:#ffffff
}

.mid {
	background-color: #FFFFFF;
	max-height: calc(100vh - 120px);
	overflow-x: hidden;
	overflow-y: scroll;
}

.mid .user-li {
	width: 92%;
	height: calc(10vh);
	border-bottom: 1px solid #E9E9E9;
	background-color: #FFFFFF;
	margin: 0 4%;
}

.mid .user-info {
	height: calc(7vh);
	padding: 3% 0;
}

.mid .user-img {
	height: calc(7vh);
	width: calc(7vh);
	padding-right: 3vw;
	float: left;
	border-radius: 10%;
}

.mid .user-info .user-time {
	float: right;
	color: #ABABAB;
}

.mid .user-info .user-newmsg {
	margin-top: 1vh;
	font-size: 8px;
	float: right;
	color: #ffffff;
	height: calc(3vh);
	padding:0 1vh;
	line-height: calc(3vh);
	background-color: red;
	border-radius: calc(1.5vh);
}

.mid .user-info .user-name {
	color: #000000;
	font-size: 18px;
	font-weight: 600;
}

.mid .user-info .user-word {
	font-size: 16px;
	padding-top: 1vh;
	color: #999999;
}

.foot {
	width: 100vw;
	height: 8vh;
	line-height: 8vh;
	position: fixed;
	z-index: 1000;
	background-color: #F9F9F9;
	bottom: 0;
	left: 0;
	text-align: center;
}

.foot .foot-box {
	width: 33.33vw;
	float:left;
}